<script lang="ts" setup>
import AvatarCard from '@/views/user/components/AvatarCard.vue'
import Account from '@/views/user/components/Account.vue'
import Information from '@/views/user/components/Information.vue'
</script>

<template>
  <AppPage>
    <n-grid cols="2" item-responsive>
      <n-grid-item span="2 400:2 600:2 1000:1" mb-20>
        <AvatarCard />
      </n-grid-item>
      <n-grid-item span="2 400:2 600:2 1000:1" mb-20>
        <n-tabs type="segment" animated>
          <n-tab-pane name="account" tab="帐户安全">
            <Account />
          </n-tab-pane>
          <n-tab-pane name="information" tab="基础信息">
            <Information />
          </n-tab-pane>
        </n-tabs>
      </n-grid-item>
    </n-grid>
  </AppPage>
</template>
